<template>
  <div>
    <div class="w-3/5 h-4/5 bg-[#221f2aff] rounded-3xl flex items-center backdrop-sepia-0">
      <!-- 图片 -->
      <div to="/player" class="w-14 h-14 bg-black rounded-3xl overflow-hidden cursor-pointer hover:opacity-60 ml-1">
        <img class="w-full h-full"
          src="https://tse1-mm.cn.bing.net/th/id/OIP-C.q_ZOKppmnu87Cpk1n6XQhAHaHa?w=214&h=214&c=7&r=0&o=5&pid=1.7" />
      </div>
      <!-- 名字 -->
      <div class="h-14 flex flex-col justify-center text-xs px-2">
        <span class="leading-5">MusicName</span>
        <div class="font-normal text-xs origin-left flex items-center">
          <div class="mr-1 max-w-[100px] overflow-hidden text-white/60 text-ellipsis truncate">Artist</div>
          <!-- 显示更多歌手 -->
          ...
        </div>
      </div>
      <!-- 控制 -->
      <div class="w-8 h-8 bg-white/10 flex items-center justify-center text-sm rounded-full cursor-pointer ml-10">
        <i class="iconfont icon-like"></i>
      </div>
      <div class="flex-1 flex items-center justify-center">
        <div class="w-10 h-10 hover:bg-white/10 flex items-center justify-center text-sm rounded-full cursor-pointer">
          <i class="iconfont icon-shangyishou"></i>
        </div>
        <div class="w-10 h-10 bg-[#ff4757] flex items-center justify-center text-sm rounded-full cursor-pointer mx-2">
          <i class="iconfont icon-bofang"></i>
        </div>
        <div class="w-10 h-10 hover:bg-white/10 flex items-center justify-center text-sm rounded-full cursor-pointer">
          <i class="iconfont icon-xiayishou"></i>
        </div>
      </div>
      <!-- 列表 -->
      <div class="w-10 h-10 flex items-center justify-center text-xs rounded-xl cursor-pointer hover:bg-black">
        <i class="iconfont icon-liebiao"></i>
      </div>
    </div>
  </div>
</template>